<template>
  <div style="display: flex">
 <category-panel
      title="分类"
      icon="tree"
      @delClick="delClick"
      @notClick="notClick"
      @nodeClick="nodeClick"
      request="billFareCategory"
      :shopCategory='shopCategory'
    
    ></category-panel>
    
    <el-container>
      <el-header>
        <div class="report_header" ref="headerHeight">
          <div class="report_header_left"></div>
          <div
            style="
              width: 300px;
              display: flex;
              align-items: center;
              margin-left: 10px;
            "
          >
            <svg-icon class="primary" :icon-class="$route.meta.icon" />

            <span style="margin-left: 5px" class="primary">{{
              $route.meta.title
            }}</span>
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: flex-end;
              width: 100%;
            "
          >
            <div
              style="
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                overflow: hidden;
                height: 41px;
              "
            >
              <div class="report_header_query">
                <!-- <el-select v-model="billFareId" placeholder="请选择">
                  <el-option
                    v-for="item in brandData"
                    :key="item.value"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select> -->
                <el-input
                  prefix-icon="el-icon-search"
                  placeholder="请输入菜名"
                  v-model="query.name"
                ></el-input>
              </div>
            </div>
            <el-button
              style="margin-left: 10px; margin-top: 5px"
              size="small"
              type="primary"
              @click="queryClick"
              >查询</el-button
            >
            <el-button
              style="margin-left: 10px; margin-top: 5px"
              size="small"
              type="primary"
              @click="addClick"
              v-permission="['variety.add']"
              >新增</el-button
            >
          </div>
        </div>
      </el-header>
      <div class="pd10">
        <el-table
          :data="brandData"
          border
          stripe
          v-loadMore="[payLoads, 'bank-list']"
          :height="curHeight"
          ref="table"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
            fixed
          >
          </el-table-column>
          <el-table-column label="菜谱名称" align="left" prop="name">
          </el-table-column>
          <el-table-column
            label="缩略图"
            align="left"
            prop="thumbnail"
            width="120"
          >
            <template slot-scope="scope">
              <img
                :src="scope.row.thumbnail"
                style="width: 80px; vertical-align: middle; overflow: hidden"
              />
            </template>
          </el-table-column>
          <el-table-column label="副标题" align="left" prop="subTitle">
          </el-table-column>
          <el-table-column label="烹任时长" align="left" prop="timeLen">
          </el-table-column>
          <!-- <el-table-column label="所在区域" align="left" prop="address">
          </el-table-column> -->
          <el-table-column label="口味" align="left" prop="flavor">
          </el-table-column>

          <el-table-column label="上手难度" align="left" prop="difficulty">
          </el-table-column>
          <!---->
          <el-table-column
            label="创建时间"
            align="left"
            prop="createDate"
            width="160"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.createDate | datetimeFormatter }}</span>
            </template>
          </el-table-column>
          <el-table-column label="功能" align="center">
            <template slot-scope="scope">
              <el-button type="primary" plain @click="recommend(scope.row)"
                v-permission="['variety.recommend']" >推荐店铺</el-button
              >
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" align="center" width="80">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                v-permission="['variety.edit']"
                placement="top-start"
              >
                <a @click="editClick(scope.row)">
                  <i style="color: #409eff" class="el-icon-edit"></i>
                </a>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                v-permission="['variety.del']"
                placement="top-start"
              >
                <a style="margin-left: 10px" @click="deletescenic(scope.row)">
                  <i style="color: #f56c6c" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- <el-dialog
      title="请选择具体位置"
      :visible.sync="mapShow"
      top="5vh"
      width="800px"
      :before-close="handleClose"
    >
      <Map :initcenter="[form.lng, form.lat]" @getMap="getMap" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="mapShow = false">取 消</el-button>
        <el-button type="primary" @click="savelngLat">确 定</el-button>
      </span>
    </el-dialog> -->
        </el-table>
      </div>
      <el-footer class="el-footerBox">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="loadBank"
        ></pagination>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import CategoryPanel from "@/components/CategoryPanel";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { list as sysMchList, getInfo } from "@/api/sysMch";
import { list, del, update } from "@/api/variety";
import utils from "../../utils/utils.js";
import { EventBus } from "@/api/eventBus";
import Pagination from "@/components/Pagination";
import loadMore from "@/utils/loadMore.js";
export default {
  name: "variety-list",
  directives: {
    permission,
    loadMore,
  },
    components: { Pagination,CategoryPanel },
  data() {
    return {
      billFareId:'',
      form: [],
      brandData: [],
      mchType: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tempLng: "",
      queryType: true,
      query: {
        name: "",
      },
      curHeight: null,
      direction: "",
      payLoads: "",
      sorting: {
        id: "",
        orders: "",
      },
      mapShow: false,
      billFareCategoryId:'',
      shopCategory:true

    };
  },

  created() {
    this.loadBank();
    EventBus.$on("variety-add", (res) => {
      // 监听新增完毕
      // 更新列表数组
      console.log(res);
      this.brandData.push(res);
    });
    EventBus.$on("variety-edit", (res) => {
      // 监听新增完毕
      // 更新列表数组
      for (let i = 0; i < this.brandData.length; i++) {
        if (this.brandData[i].id == res.id) {
          this.$set(this.brandData, i, res);
        }
      }
    });
  },
  mounted() {
    this.comeIn();
    this.beforeMount();
  },
  filters: {},
  activated() {},

  methods: {
    beforeMount() {
      var _this = this;
      window.onresize = () => {
        return (() => {
          if (this.queryType == false) {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            _this.curHeight = h - 266; //减去页面上固定高度height
          } else {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            _this.curHeight = h - 220; //减去页面上固定高度height
          }
        })();
      };
    },
    comeIn() {
      var h =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 220; //减去页面上固定高度height
    },
    queryClick() {
      this.pageNum = 1;
      this.loadBank()

    },
    recommend(row) {
      this.$router.push({
        path: "/variety/recommend",
        query: {
          id: row.id,
          name: row.name,
          thumbnail: row.thumbnail,
        },
      });
    },
    addClick() {
      this.$router.push({
        path: "/variety/add",
      });
    },

    sortChange() {},
    loadBank() {
      let params = new URLSearchParams();
      params.append("pageNum", this.pageNum);
      params.append("pageSize", this.pageSize);
      params.append('name', this.query.name);
      params.append('billFareCategoryId', this.billFareCategoryId);
      list(params)

        .then((response) => {
          console.log(response);
          console.log(params);
          this.brandData = response.data.data;
          console.log(this.brandData);

          this.total = response.data.total;
          console.log(total);
        })
        .catch((error) => {
          console.log("error!!");
        });
    },
    editClick(row) {
      console.log(row);
      this.$router.push({
        path: "/variety/edit",
        query: {
          id: row.id,
        },
      });
    },
    deletescenic(data) {
      console.log(data);
      var _this = this;
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del(data.id)
            .then((response) => {
              console.log(response);

              if (response.type)
                // 更新列表数组
                _this.brandData.forEach(function (item, index) {
                  if (item.id == data.id) {
                    _this.brandData.splice(index, 1);
                  }
                });
            })
            .catch((error) => {
              console.log("error!!");
            });
        })
        .catch(() => {});
    },
       notClick() {
     
      this.loadBank();
    },
    delClick() {
    
      this.loadBank();
    },
    nodeClick(data) {
      this.billFareCategoryId = data.id;
      console.log(data.id);
      this.loadBank();
    },


    // handleClose(done) {
    //   this.$confirm('确认关闭？')
    //     .then(_ => {
    //       done()
    //     })
    //     .catch(_ => {})
    // },
    //   getMap(lng, lat) {
    //   console.log(lng, lat)
    //   // 定义变量保存经纬度
    //   this.tempLng = lng
    //   this.tempLat = lat
    // },
    //     savelngLat() {
    //   this.form.lng = this.tempLng
    //   this.form.lat = this.tempLat
    //   this.mapShow = false
    // },
  },
};
</script>

<style scoped>
.el-footerBox {
  height: 50px !important;
  line-height: 50px !important;
  border-top: 1px solid #f2f2f2;
}

.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/.el-header {
  padding: 10px;
  /* height: 100% !important; */
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
}
.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409eff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.report_header_date {
  margin-left: 10px;
  width: 250px;
  margin-top: 5px;
}
.report_header_query {
  margin-left: 10px;
  width: 180px;
  margin-top: 5px;
}
</style>
